<template>
	<view class="wallpaperItem_container" :class="{popupShow: isShow}">
		<!-- topNavBar -->
		<topNavBar :isFixed="true" :showFreeLayout="true" navBarBacColor="transparent" ref="refNavBar">
			<template v-slot:freeLayout>
				<view class="wallpaperItem_container_returnPage box box-align-center">
					<view
						class="wallpaperItem_container_returnPage_icon frostedGlass box box-align-center box-pack-center">
						<u-icon name="arrow-left" size="20" color="#eee" @click="go_returnPage" />
					</view>
				</view>
			</template>
		</topNavBar>
		<!--  壁纸内容 -->
		<view class="wallpaperItem_container_wallpaperImage">
			<InitTime />
			<view v-if="isActiveWallpaperType" style="width: 100%; height: 100%;" @click="wallpaperToolsShow">
				<image :src="isWallpaper.img" mode="aspectFill" style="width: 100%; height: 100%;" />
			</view>
			<view v-else style="width: 100%; height: 100%;" @click="wallpaperToolsShow">
				<u-swiper :list="isWallpaper" keyName="img" height="100%" :autoplay="false" radius="0"
					:current="isCurrentWallpaper" @change="slidingFn" />
			</view>
			<view class="wallpaperTools box box-pack-center" 
			:style="{bottom: currentPhoneModel}">
				<view class="wallpaperTools_gong frostedGlass box box-pack-between"
					:style="{'transform':isToolsShow ? 'translateY(0%)':'translateY(200%)'}">
					<!-- 保存壁纸 -->
					<view>
						<u-button type="primary" size="small" text="保存壁纸" :hairline="false"
							color="rgba(90, 199, 37, 0.85)" @click="saveWallpaper" />
					</view>
					<!--  生成分享海报-->
					<view @click="go_posters">
						<u-icon name="file-text-fill" color="#eaeaea" size="30" />
					</view>
					<!-- 壁纸详细信息 -->
					<view class="wallpaperDetailed" @click="go_wallpaperDetailedInfo">
						<u-icon name="info-circle-fill" color="#eaeaea" size="30" />
					</view>
					<!-- 索引指示器 -->
					<view class="lengthIndex box box-align-center box-pack-center" v-show="!isActiveWallpaperType">
						<text class="lengthIndex_num">{{ `${(isCurrentWallpaper + 1 >= 10 ? isCurrentWallpaper + 1 :  '0' + String(isCurrentWallpaper + 1)) + '/' + isWallpaperLength}` }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 壁纸信息内容 -->
		<u-popup :show="isShow" :round="10" mode="bottom" @close="close" overlayStyle="rgb(0, 0, 0, / 55%)"
			:safeAreaInsetBottom="true">
			<view class="wallpaperItem_container_Popup">
				<view class="wallpaperItem_container_Popup_item box box-pack-between box-align-center">
					<view class="item_icon">
						<image :src="require('@/static/images/wallpaperDetailed/dianzan.png')" mode="aspectFill"
							style="width: 100%; height: 100%;" />
					</view>
					<view class="item_text">
						<text class="item_text_null">{{ isCurrentWallpaperObjInfo.rank }}次</text>
					</view>
				</view>
				<view class="wallpaperItem_container_Popup_item box box-pack-between box-align-center">
					<view class="item_icon">
						<image :src="require('@/static/images/wallpaperDetailed/shoucang.png')" mode="aspectFill"
							style="width: 100%; height: 100%;" />
					</view>
					<view class="item_text">
						<text class="item_text_null">{{ isCurrentWallpaperObjInfo.favs }}次</text>
					</view>
				</view>
				<view class="wallpaperItem_container_Popup_item box box-pack-between box-align-center"
					style="width: 80%;">
					<view class="item_icon">
						<image :src="require('@/static/images/wallpaperDetailed/biaoqian.png')" mode="aspectFill"
							style="width: 100%; height: 100%;" />
					</view>
					<view class="item_text">
						<text class="item_text_null item_title"
							style="">{{ isCurrentWallpaperObjInfo.title?isCurrentWallpaperObjInfo.title: '目前没有标签哦' }}</text>
					</view>
				</view>
			</view>
		</u-popup>
		<hch-poster ref="hchPoster" :posterData.sync="posterData" @previewImage='previewImage' />
	</view>
</template>

<script>
	import InitTime from '../components/initTime/initTime.vue'
	import { weatherToosStyle } from '@/utils/tools.js'
	import mapState from 'vuex'
	export default {
		data() {
			return {
				isShow: false,
				isToolsShow: true,
				// 海报模板数据
				posterData: {
					poster: {
						//根据屏幕大小自动生成海报背景大小
						url: "", //图片地址
						r: 20, //圆角半径
						w: 320, //海报宽度
						h: 600, //海报高度
						p: 20 //海报内边距padding
					},
					mainImg: {
						//海报主商品图
						url: "", //图片地址
						r: 20, //圆角半径
						w: 200, //宽度
						h: 350 //高度
					},
					title: {
						//商品标题
						text: "", //文本
						fontSize: 14, //字体大小
						color: "#000", //颜色
						lineHeight: 25, //行高
						mt: 30 //margin-top
					},
					codeImg: {
						//小程序码
						url: "https://s1.ax1x.com/2022/10/23/xgJaPf.jpg", //图片地址
						w: 100, //宽度
						h: 100, //高度
						mt: 20, //margin-top
						r: 50 //圆角半径
					},
					tips: [
						//提示信息
						{
							text: "", //文本
							fontSize: 14, //字体大小
							color: "#2f1709", //字体颜色
							align: "center", //对齐方式
							lineHeight: 25, //行高
							mt: 0 //margin-top
						},
						{
							text: "", //文本
							fontSize: 12, //字体大小
							color: "#2f1709", //字体颜色
							align: "center", //对齐方式
							lineHeight: 25, //行高
							mt: 0 //margin-top
						}
					]
				}
			}
		},
		components: {
			InitTime
		},
		created() {
			this.posterData.mainImg.url = this.$store.state.isCurrentWallpaperObjInfo.img;
			this.posterData.title.text = `今天心情真不错，分享一下我用的壁纸吧！壁纸标签：${this.$store.state.isCurrentWallpaperObjInfo.title ?
				this.$store.state.isCurrentWallpaperObjInfo.title : '该壁纸目前没有标签'}`
		},
		methods: {
			// 返回
			go_returnPage() {
				uni.navigateBack();
			},
			// 关闭Toast
			close() {
				this.isShow = false;
			},
			// 数组对象壁纸左右滑动事件
			slidingFn(index) {
				this.$store.commit('currentWallpaperIndex', index.current);
				this.$store.commit('currentWallpaperObjInfo', this.$store.state.isCurrentWallpaperArr[index.current]);
				this.posterData.mainImg.url = this.$store.state.isCurrentWallpaperObjInfo.img;
				this.posterData.title.text = `今天心情真不错，分享一下我用的壁纸吧！壁纸标签：${this.$store.state.isCurrentWallpaperObjInfo.title ?
					this.$store.state.isCurrentWallpaperObjInfo.title : '该壁纸目前没有标签'}`
			},
			// 是否开启壁纸详细信息事件
			go_wallpaperDetailedInfo() {
				this.isShow = true;
			},
			// 是否显示wallpaperTools 功能容器
			wallpaperToolsShow() {
				this.isToolsShow = !this.isToolsShow;
			},
			// 保存分享海报壁纸
			go_posters() {
				this.$refs.hchPoster.posterShow();
			},
			// 保存壁纸
			saveWallpaper() {
				this.preservationImg(this.$store.state.isCurrentWallpaperObjInfo.img);
			},
			// 保存壁纸方法
			preservationImg(img) {
				let that = this
				uni.authorize({
					/* scope.writePhotosAlbum 类型是保存到相册 */
					scope: 'scope.writePhotosAlbum',
					success() {
						/* 已授权进入 */
						/* 保存图片到相册方法方法 */
						that.imgApi(img);
					},
					complete(res) {
						/* 判断如果没有授权就打开设置选项让用户重新授权 */
						uni.getSetting({
							success(res) {
								if (!res.authSetting['scope.writePhotosAlbum']) {
									/* 打开设置的方法 */
									that.opensit();
								}
							}
						});
					}
				});
			},
			// 获取图片的信息
			imgApi(image) {
				/* 获取图片的信息 */
				uni.getImageInfo({
					src: image,
					success: function(image) {
						console.log(image);
						/* 保存图片到手机相册 */
						uni.saveImageToPhotosAlbum({
							filePath: image.path,
							success: function() {
								uni.showModal({
									title: '保存成功',
									content: '图片已成功保存到相册',
									showCancel: false
								});
							},
							complete(res) {
								console.log(res);
							}
						});
					}
				});
			},
			// 相册是否有授权
			opensit() {
				uni.showModal({
					content: '没有授权保存图片到相册,点击确定去允许授权',
					success: function(res) {
						if (res.confirm) {
							/* 打开设置的API*/
							uni.openSetting({
								success(res) {
									console.log(res.authSetting);
								}
							});
						} else if (res.cancel) {
							uni.showModal({
								cancelText: '取消',
								confirmText: '重新授权',
								content: '你点击了取消，将无法进行保存操作',
								success: function(res) {
									if (res.confirm) {
										uni.openSetting({
											success(res) {
												/* 授权成功 */
												console.log(res.authSetting);
											}
										});
									} else if (res.cancel) {
										console.log('用户不授权');
									}
								}
							});
						}
					}
				});
			},
		},
		computed: {
			isWallpaper() {
				return this.$store.state.isWallpaperType ? this.$store.state.isCurrentWallpaperObj : this.$store.state
					.isCurrentWallpaperArr;
			},
			isActiveWallpaperType() {
				return this.$store.state.isWallpaperType;
			},
			isCurrentWallpaper() {
				return this.$store.state.isCurrentWallpaperIndex;
			},
			isWallpaperLength() {
				return this.$store.state.isCurrentWallpaperArr.length;
			},
			isCurrentWallpaperObjInfo() {
				return this.$store.state.isCurrentWallpaperObjInfo;
			},
			currentPhoneModel() {
				return weatherToosStyle(this.$store.state.currentPhoneModel);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wallpaperItem_container {
		width: 100%;
		position: relative;

		&_returnPage {
			width: 100%;
			height: 100%;

			&_icon {
				width: 66rpx;
				height: 66rpx;
				border-radius: 50%;
				background-color: rgba(0, 0, 0, 0.25);
			}
		}

		&_wallpaperImage {
			overflow: hidden;
			position: fixed;
			width: 100%;
			height: 100vh;

			.wallpaperTools {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				// 适配底部安全区，iphoneX及以上机型
				padding-bottom: 40rpx;
				padding-bottom: constant(safe-area-inset-bottom);
				padding-bottom: env(safe-area-inset-bottom);

				&_gong {
					width: 80%;
					height: auto;
					padding: 24rpx 30rpx;
					border-radius: 16rpx;
					background-color: rgba(0, 0, 0, 0.25);
					transition: all 0.35s ease-in-out;

					.wallpaperDetailed {}

					.lengthIndex {
						width: 90rpx;
						padding: 8rpx;
						background-color: rgba(225, 225, 225, 0.35);
						border-radius: 16rpx;

						&_num {
							font-size: 30rpx;
							color: #fff;
						}
					}
				}
			}
		}

		&_Popup {
			width: 100%;
			padding: 20rpx 40rpx 80rpx 40rpx;
			height: auto;
			box-sizing: border-box;

			&_item {
				width: 50%;
				padding: 14rpx 20rpx;
				background-color: #eaeaea;
				border-radius: 40rpx;
				margin-bottom: 20rpx;

				.item_icon {
					width: 60rpx;
					height: 60rpx;
					margin-right: 20rpx;
				}

				.item_text {
					// flex: 1;
				}

				.item_title {
					font-size: 30rpx;
				}
			}
		}
	}
</style>
